<template>
  <div class="player-dialog-main"
    :class="{
      'player-dialog-single': options.single, // 样式控制 - 单视频模式
      'player-dialog-operand': options.operand, // 样式控制 - 底部操作栏 (布局)，默认无
      'player-dialog-border': options.border, // 样式控制 - 边框，默认无
      'player-dialog-position-bottom': options.listPosition === 'bottom'
    }"
    :style="{ width: options.sWidth, height: options.sHeight }">
    <template v-if="options && options.list && options.list.length > 0">
      <div class="player-dialog-c">
        <!-- 视频播放窗口 -->
        <div class="player-dialog-cl" :class="'player-dialog-cl' + (videoList && videoList.length)">
          <div
            v-for="(item, index) in videoList"
            :key="index"
            :class="{ 'player-dialog-cl-sed': index === currentIndex }"
            class="player-dialog-cl-li"
            @click="sel(index)">
            <div>
              <MySimplePlayer
                v-if="item"
                :cameraData="item"
                :playerIndex="index"
                :playerTools="options.playerTools"
                @playerCloseEmit="playerCloseEmit"
                @playerClickEmit="playerClickEmit">
              </MySimplePlayer>
            </div>
          </div>
        </div>
        <!-- 视频列表 -->
        <div class="player-dialog-cr">
          <el-scrollbar wrap-class="com-scrollbar-wrap-class" :size="6">
            <ul class="player-dialog-cr-ul">
              <li v-for="(item, index) in options.list" :key="index">
                <div
                  class="player-dialog-video-dis com-ellipsis"
                  :class="{'player-dialog-video-sed': videoList[currentIndex] && videoList[currentIndex].cameraIndexCode === item.cameraIndexCode}"
                  :title="item.cameraName"
                  v-if="videoIsPlaying(item)">
                  <i class="icons-icon icon_dianwei"></i>
                  {{item.cameraName}}
                </div>
                <div class="com-ellipsis" @click="selVideo(item)" v-else>
                  <i class="icons-icon icon_dianwei"></i>
                  {{item.cameraName}}
                </div>
              </li>
            </ul>
          </el-scrollbar>
        </div>
      </div>
      <div class="player-dialog-b">
        <!-- 视频窗口数量切换 -->
        <ul class="player-dialog-bnum">
          <li v-for="item in videoNums" :key="item.value" :class="{ 'player-dialog-bnum-sed': item.sed }">
            <div :class="'player-dialog-bnum' + item.value" @click="videoNumSel(item)"></div>
          </li>
        </ul>
      </div>
    </template>
    <DataEmpty v-else></DataEmpty>
  </div>
</template>
<script>
export default {
  name: 'PlayerDialog',
  components: {
  },
  props: {
    /**
     * @summary 播放器窗口
     * @param {Object} data 数据
     * @param {Number} data.layout 布局数量
     * @param {String} data.listPosition 列表位置
     * @param {Boolean} data.border 边框
     * @param {Boolean} data.single 单窗口播放，默认为false
     * @param {String} data.sWidth 宽度
     * @param {String} data.sHeight 高度
     * @param {Boolean} data.operand  底部操作栏，layout操作等
     * @param {Array} data.showList 默认展示的视频列表
     * @param {Object} data.sedData 当前选中的数据
     * @param {Array} data.list 数据列表
     * @param {Object} data.playerTools 工具/标题栏配置
     * */
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      videoList: [null, null, null, null],
      currentIndex: 0,
      videoNums: [
        { value: 1, sed: false },
        { value: 4, sed: true }
      ],
      options: {
        sWidth: '100%',
        sHeight: '100%',
        single: false,
        layout: 4,
        border: true,
        operand: true,
        playerTools: { close: true },
        showList: null
      },
      pdDefaultTools: { close: true }
    }
  },
  created () {
    Object.assign(this.options, this.data)
    if (this.options.playerTools) {
      const _pt = {}
      Object.assign(_pt, this.pdDefaultTools, this.options.playerTools)
      this.options.playerTools = _pt
    }
    // if (this.data && this.data.list && this.data.list.length === 1) {
    //   // 如果只有一个点位，则强制为单窗口播放
    //   this.videoList = [null]
    //   this.videoNums = [
    //     { value: 1, sed: true },
    //     { value: 4, sed: false }
    //   ]
    //   this.single = true
    // } else
    if (this.options && this.options.layout === 1) {
      // 指定了布局为1
      this.videoList = [null]
      this.videoNums = [
        { value: 1, sed: true },
        { value: 4, sed: false }
      ]
    }
    if (this.options && this.options.showList && this.options.showList.length > 0) {
      // 有默认的展示列表
      this.videoList.map((item, index) => {
        if (this.options.showList[index]) {
          this.videoList[index] = Object.assign({}, this.options.showList[index])
        }
      })
    } else if (this.options && this.options.sedData) {
      // 默认选择的
      this.videoList[0] = this.options.sedData
    }
    this.videoList = this.videoList.concat([])
  },
  methods: {
    // 选中视频窗口 序号
    sel (index) {
      this.currentIndex = index
    },
    // 选中视频列表数据
    selVideo (data) {
      this.videoList[this.currentIndex] = null
      this.videoList = this.videoList.concat([])
      this.$nextTick(() => {
        window.setTimeout(() => {
          this.videoList[this.currentIndex] = Object.assign({}, data)
          this.videoList = this.videoList.concat([])
        }, 200)
      })
    },
    // 判断点位是否在播放中
    videoIsPlaying (data) {
      let flag = false
      for (let i = 0; i < this.videoList.length; i++) {
        if (this.videoList[i] && this.videoList[i].cameraIndexCode === data.cameraIndexCode) {
          flag = true
          break
        }
      }
      return flag
    },
    // 选中窗口模式/数量
    videoNumSel (data) {
      if (data.sed) { return false } // 已经选中了
      this.videoNums.map((item) => {
        item.sed = false
      })
      data.sed = true
      const _cd = this.videoList[this.currentIndex] // 当前选中的视频
      if (data.value === 1) {
        this.videoList = [_cd]
      } else if (data.value === 4) {
        this.videoList = [_cd, null, null, null]
      }
      this.currentIndex = 0
      this.$emit('videoNumEmit', data.value)
    },
    // 播放器点击（选择）
    playerClickEmit (index) {
      this.currentIndex = index
    },
    // 关闭播放器emit
    playerCloseEmit (index) {
      // this.currentIndex = index
      console.log('>>>>>>>>>> playerCloseEmit：', index)
      this.videoList[index] = null
      this.videoList = this.videoList.concat([])
    }
  }
}
</script>
<style lang="scss" scoped>
.player-dialog-main {
  position: relative;
  width: 100%; height: 100%;
  padding: 0.5rem;
  .player-dialog-c {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
    .player-dialog-cl {
      position: relative;
      float: left;
      width: 75%; height: 100%;
      > .player-dialog-cl-li {
        height: 100%; width: 100%;
        position: relative;
        > div {
          width: 100%; height: 100%;
          background-color: rgba(0, 0, 0, 0.8);
          border: 0;
        }
        &.player-dialog-cl-sed {
          z-index: 2 !important;
          > div { border-color: rgba(4, 202, 252, 1) !important; }
        }
      }
      &.player-dialog-cl1 {
        > .player-dialog-cl-li {
          width: 100%; height: 100%;
        }
      }
      &.player-dialog-cl4 {
        position: relative;
        > .player-dialog-cl-li {
          position: absolute; z-index: 1;
          width: 50%; height: 50%;
          &:nth-child(1) {
            top: 0; left: 0;
          }
          &:nth-child(2) {
            top: 0; right: 0;
          }
          &:nth-child(3) {
            bottom: 0; left: 0;
          }
          &:nth-child(4) {
            bottom: 0; right: 0;
          }
        }
      }
    }
    .player-dialog-cr {
      margin-left: 75%; height: 100%;
      .player-dialog-cr-ul {
        padding: 0 0.2rem 0 0.6rem;
        > li {
          padding: 0 0 0.3rem 0;
          > div {
            position: relative;
            height: 2rem; line-height: 2rem;
            padding-left: 2rem; padding-right: 0.6rem;
            font-size: 1rem; color: rgba(255, 255, 255, 0.8);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100% 100%;
            background-image: url('@/assets/images/comm/player_lt_01.png');
            cursor: pointer;
            > i {
              position: absolute; left: 0.3rem; top: 0.3rem;
            }
            &:hover { color: rgba(255, 255, 255, 1); }
            &.player-dialog-video-dis {
              cursor: default;
              color: #1AADFF !important;
            }
            &.player-dialog-video-sed {
              cursor: default;
              background-image: url('@/assets/images/comm/player_lt_02.png');
              color: rgba(255, 255, 255, 1) !important;
            }
          }
        }
      }
    }
  }
  // 底部操作栏 (布局)
  .player-dialog-b {
    display: none;
    position: absolute; bottom: 0.5rem; left: 0.5rem; right: 0.5rem;
    padding: 0.5rem 0;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    > .player-dialog-bnum {
      float: right;
      margin-right: 0.5rem;
      > li {
        float: left;
        padding: 0 0.3rem;
        > div {
          width: 1.5rem; height: 1.5rem;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 100% 100%;
          cursor: pointer;
          &.player-dialog-bnum1 { background-image: url('@/assets/images/comm/player_nm_11.png'); }
          &.player-dialog-bnum4 { background-image: url('@/assets/images/comm/player_nm_41.png'); }
        }
        &.player-dialog-bnum-sed {
          > div {
            cursor: default;
            &.player-dialog-bnum1 { background-image: url('@/assets/images/comm/player_nm_12.png'); }
            &.player-dialog-bnum4 { background-image: url('@/assets/images/comm/player_nm_42.png'); }
          }
        }
      }
    }
  }
  // 样式控制 - 边框，默认无
  &.player-dialog-border {
    .player-dialog-c {
      .player-dialog-cl {
        > div {
          > div {
            border: 0.2rem solid #999;
          }
        }
        &.player-dialog-cl4 {
          > div {
            width: 50%; height: 50%;
             width: calc(50% + 0.1rem); height: calc(50% + 0.1rem);
          }
        }
      }
    }
  }
  // 样式控制 - 底部操作栏 (布局)，默认无
  &.player-dialog-operand {
    .player-dialog-c {
      padding-bottom: 3rem;
    }
    .player-dialog-b {
      display: block;
    }
  }
  // 样式控制 - 单视频模式
  &.player-dialog-single {
    .player-dialog-c {
      // padding-right: 20px;
      padding-bottom: 0;
      .player-dialog-cl {
        width: 100%;
        > div {
          > div {
            border: 0;
          }
        }
      }
      .player-dialog-cr {
        display: none;
      }
    }
    .player-dialog-b {
      display: none;
    }
  }
  // 样式控制 - 列表在下面 ***********
  &.player-dialog-position-bottom {
    .player-dialog-c {
      padding-bottom: 12rem;
      .player-dialog-cl {
        width: 100%;
      }
      .player-dialog-cr {
        position: absolute; bottom: 3rem;
        width: 100%;
        margin-left: 0; height: 9rem;
        .player-dialog-cr-ul {
          overflow: hidden;
          padding: 0.5rem 0.25rem 0.5rem 0;
          > li {
            float: left;
            width: 50%;
          }
        }
      }
    }
  }
}
</style>
